<template>
    <div class="main-container">
        <div class="title">
            <h2>{{isEdit ? '编辑文件' : '添加文件'}}</h2>
            <router-link :to="'/article-mng?columnId='+columnId" class="pull-right">返回文章管理>></router-link>
        </div>
        <el-form ref="form" label-width="80px">
            <el-form-item label="所屬欄目:">
                <select-tree ref="iSelectTree"
                    v-model="columnId"
                    :data="columnTreeData"
                    :disabled="isEdit"
                    :props="{label: 'columnName', children: 'children', nodeKey: 'id'}">
                </select-tree>
            </el-form-item>
            <el-form-item label="標題:">
                <el-input v-model="fileTitle"></el-input>
            </el-form-item>
            <template v-if="!isEdit">
                <el-form-item class="file-select" label="文件選擇:">
                    <div class="btn-browser">選擇文件</div>
                    <div class="file-info">
                        <span class="name"></span>
                        <span class="state"></span>
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" class="savePic">保存上傳</el-button>
                </el-form-item>
            </template>
            <template v-else>
                <el-form-item>
                    <el-button type="primary" @click="updateMediaInfo">保存</el-button>
                </el-form-item>
            </template>
        </el-form>
    </div>
</template>
<script>
import '../../../node_modules/webuploader/dist/webuploader.css';
import WebUploader from 'webuploader';
export default {
    data() {
        return {
            isEdit: false,
            columnId: '',
            mediaId: '',
            fileTitle: '',
            columnTreeData: [{
                id: '0',
                columnName: '頂級欄目'
            }]
        };
    },
    created() {
        let {mediaId, fileTitle} = this.$route.query;
        if (mediaId) {
            this.isEdit = true;
            this.mediaId = mediaId;
            this.fileTitle = fileTitle;
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            /**
             * 这个页面处理三类内容
             * 1 编辑栏目，传入columnId
             * 2 新增子栏目，传入父栏目id,parentId
             * 3 新增栏目，没有任何参数
             */
            let columnId = +this.$route.query.columnId || '0';
            // 添加栏目
            this.getColumnTree().done(() => {
                this.columnId = columnId;
            });
            this.initUploader();
        },
        getColumnTree() {
            return $.request('/column/getColumnTrees.do', {
                method: 'get'
            }).then(res => {
                res.data.every(item => {
                    return this.columnTreeData.push(item);
                });
            });
        },
        updateMediaInfo() {
            $.request('/media/updateMediaById.do', {
                data: {
                    id: this.mediaId,
                    fileTitle: this.fileTitle
                },
                method: 'post'
            }).then(res => {
                this.$message({message: '保存成功', type: 'success'});
                this.$router.go(-1);
            });
        },
        initUploader() {
            let me = this;
            let fileId = null;
            let $state = $('.file-info .state');
            let $name = $('.file-info .name');
            let uploader = WebUploader.create({
                server: '/media/mediaUpload.do',
                pick: '.btn-browser',
                resize: false
            });
            uploader.on('fileQueued', function (file) {
                fileId = file.id;
                let fileName = file.name;
                if (/\.(jpg|gif|png)$/.test(fileName)) {
                    uploader.makeThumb(file, function(error, ret) {
                        if (error) {
                            $name.text('预览错误');
                        } else {
                            $name.html('<img alt="" src="' + ret + '" />');
                        }
                    });
                }
                else {
                    $name.html(fileName);
                }
            });
            uploader.on('uploadProgress', function (file, percentage) {
                $state.html('<span class="uplaoding">上傳中---'
                    + '<i class="el-icon-loading"></i></span>');
            });
            uploader.on('uploadSuccess', function (file, res) {
                let strHtml = '<span class="success">上傳成功</span>';
                $state.html(strHtml);
                me.$alert('保存成功！点击返回文章管理', '提示', {
                    confirmButtonText: '確定',
                    type: 'success',
                    callback: action => {
                        me.$router.push({
                            path: 'article-mng',
                            query: {
                                columnId: me.columnId
                            }
                        });
                    }
                });
            });
            uploader.on('uploadError', function (file, res) {
                $state.html('<span class="error">上傳出錯</span>');
            });
            $('.savePic').on('click', () => {
                uploader.options.formData.columnId = this.columnId;
                uploader.options.formData.fileTitle = this.fileTitle;
                uploader.upload(fileId);
            });
        }
    }
}
</script>
<style lang="less">
    .file-select {
        img {
            max-width: 200px;
        }
        .webuploader-container {
            margin: 6px 0;
        }
        .webuploader-pick {
            padding: 0 15px;
        }
    }
</style>
